<template>
    <el-dialog title="质检单" :visible.sync="dialogFormVisible" width="70%" :append-to-body="true"
    @close="dialogClose">
      <el-form :inline="true" status-icon>
          <el-row>
            <el-form-item label="质检单号">
                <el-input v-model="inspectionOrderInfo.fiamid" placeholder="采购单号" value-key="fpamid" />
          </el-form-item>
          <el-form-item label="关联到货单号">
            <el-input v-model="inspectionOrderInfo.fpamid" placeholder="到货单号" value-key="fpmid" />
          </el-form-item>
          <el-form-item label="关联采购单号">
            <el-input v-model="inspectionOrderInfo.fpmid" placeholder="采购单号" value-key="fpmid" />
          </el-form-item>
          <el-form-item label="采购员">
            <el-select v-model="inspectionOrderInfo.feid"  placeholder="请选择">
                <el-option v-for="item in empList" :key="item.feid" :label="item.fename" :value="item.feid"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="供应商">
              <el-select v-model="inspectionOrderInfo.fpid" placeholder="请选择">
                <el-option v-for="item in provList" :key="item.fpid" :label="item.fpname" :value="item.fpid"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="仓库名称">
            <el-select v-model="inspectionOrderInfo.fwhid"  placeholder="请选择">
                <el-option
                  v-for="item in warehouseList"
                  :key="item.fwhid"
                  :label="item.fwhname"
                  :value="item.fwhid">
                </el-option>
              </el-select>
        </el-form-item>
          <el-form-item label="到货日期">
            <el-date-picker v-model="inspectionOrderInfo.fiamdate"type="date" :default-time="fiamdate" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期" />
          </el-form-item>
          </el-row>
      </el-form>
      <el-form>
        <el-form-item label="备注" >
            <el-input v-model="inspectionOrderInfo.fiammemo"  type="textarea" placeholder="请输入内容" maxlength="200" show-word-limit   autocomplete="off" /> 
        </el-form-item>
      </el-form>
      <!-- 按钮部分 -->
      <el-form>
        <el-form-item>
            <el-button type="primary" @click="selectArrivalOrder">选择到货单</el-button>
            <el-button type="primary" @click="submitForm()">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 表格部分 -->
      <el-table :data="inspectionOrderInfo.inspectionArrivalChildOrderVoList" style="width: 100%">
        <!-- <el-table-column prop="fpamid" label="到货单号" width="100" sortable /> -->
        <el-table-column prop="fmid" label="物资编号" width="100" sortable />
        <el-table-column prop="fmname" label="物资名称" width="100" sortable />
        <el-table-column prop="fiacquantity" label="数量" width="200" sortable />
        <el-table-column prop="fqualified" label="合格数量" width="200" sortable />
        <el-table-column prop="funqualified" label="不合格数量" width="200" sortable />
        <el-table-column prop="fiacmemo" label="备注" width="200" sortable />
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button type="primary" size="big" @click="vueDelete(scope.row)">删除</el-button>
                <el-button type="primary" size="big"  @click="vueEdit(scope)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 采购到货订单信息对话框 -->
    <el-dialog title="到货单信息" :visible.sync="purchaseArrivalOrderVisible" width="70%" :append-to-body="true" close-on-click-modal="false" close-on-press-escape
    destroy-on-close="true">
    <!-- 查询表单 -->
    <el-form :inline="true">
        <el-form-item>
            <el-autocomplete
                v-model="searchObj.fpmid"
                :trigger-on-focus="false"
                class="inline-input"
                placeholder="采购单号"
                value-key="fpmid" />
        </el-form-item>
        <el-form-item>
            <el-autocomplete
            v-model="searchObj.fename"
            :trigger-on-focus="false"
            class="inline-input"
            placeholder="采购员"
            value-key="fename" />
        </el-form-item>
        <el-form-item>
            <el-date-picker
            v-model="searchObj.searchStartDate"
            type="date"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期">
            </el-date-picker>
        </el-form-item>
        <el-form-item>
            <el-date-picker
            v-model="searchObj.searchEndDate"
            type="date"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="-">
            </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="purchaseOrderFetch()">查询</el-button>
          <el-button type="default" @click="purchaseOrderReset()">清空</el-button>
        </el-form-item>
    </el-form>

    <!-- 表格部分代码 -->
    <el-table
    :data="purchaseArrivalOrderList"
    style="width: 100%" 
    >
        <el-table-column
            prop="fpamid"
            label="到货单号"
            width="100"
            sortable
            />
        <el-table-column
            prop="fpmid"
            label="采购单号"
            width="100"
            sortable
            />
        <el-table-column
            prop="fename"
            label="采购员"
            width="150"
            sortable
            />
        <el-table-column
            prop="fpname"
            label="供应商"
            width="100"
            sortable
            />
        <el-table-column
            prop="fwhname"
            label="采购仓库"
            width="200"
            sortable
            />
        <el-table-column
            prop="fpamdate"
            label="到货日期"
            width="100"
            :formatter="dateFormat"
            sortable
            />
        <el-table-column label="采购状态" width="100" prop="fpmstatus" sortable>
            <template slot-scope="scope">
                <el-tag type="warning" effect="dark" v-if="scope.row.fpamstatus==0">审批中</el-tag>
                <el-tag type="danger" effect="dark" v-else-if="scope.row.fpamstatus==1">审批通过</el-tag>
                <el-tag type="danger" effect="dark" v-else-if="scope.row.fpamstatus==2">审批驳回</el-tag>
                <el-tag type="danger" effect="dark" v-else-if="scope.row.fpamstatus==3">采购完成</el-tag>
                <el-tag type="danger" effect="dark" v-else>审批中</el-tag>
            </template>
        </el-table-column>
        <el-table-column
            prop="fpammemo"
            label="备注"
            width="200"
            sortable
            />
        <el-table-column>
            <template slot-scope="scope">
                <el-button type="primary" size="small" @click="purchaseArrivalOrderAdd(scope.row)">选择</el-button>
            </template>
        </el-table-column>     
    </el-table>
    </el-dialog>

    <!-- 编辑单条物资信息 -->
    <el-dialog title="物资信息" :visible.sync="confirmMaterialVisible" width="30%" :append-to-body="true" close-on-click-modal close-on-press-escape
        @close="confirmDialogClose" model="false">
        <el-form>
            <el-form-item label="物资名称">
                <el-input v-model="confirmMaterialInfo.fmname" placeholder="请输入内容" />
            </el-form-item>
            <el-form-item label="物资数量">
                <el-input-number v-model="confirmMaterialInfo.fiacquantity" :min="1" :max="99999" label="描述文字"></el-input-number>
            </el-form-item>
            <el-form-item label="合格数量">
                <el-input-number v-model="confirmMaterialInfo.fqualified"  type="textarea" placeholder="请输入内容" maxlength="200" show-word-limit   autocomplete="off" /> 
            </el-form-item>
            <el-form-item label="不合格数量">
                <el-input-number v-model="confirmMaterialInfo.funqualified"  type="textarea" placeholder="请输入内容" maxlength="200" show-word-limit   autocomplete="off" /> 
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="confirmMaterialInfo.fiacmemo"  type="textarea" placeholder="请输入内容" maxlength="200" show-word-limit   autocomplete="off" /> 
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="confirmMaterialSubmit(confirmMaterialInfo)">提交</el-button>
            </el-form-item>
        </el-form>
        </el-dialog>
    </el-dialog>
</template>
<script>
import moment from 'moment'
import { getEmpList } from '@/api/emp'
import { getWarehouseList } from '@/api/warehouse'
import { getProvList } from '@/api/prov'
import { getMaterialList } from '@/api/material'
import { getPurchaseArrivalOrderList } from '@/api/arrivalOrder'
import { createInspectionOrder, updateInspectionOrder } from '@/api/inspectionOrder'
import { getPurchaseOrderList } from '@/api/purchaseOrder'

export default {
    props: {
        dialogFormVisible: Boolean,
        editInspectionOrder: {
            type: Object,
            default: {}
        },
        updateOrCreate: Boolean
    },
    data() {
        return {
            empList: {},
            warehouseList: {},
            purchaseArrivalOrderList: {},
            provList: {},
            confirmVisible: false,
            purchaseArrivalOrderVisible: false,
            confirmMaterialVisible: false,
            confirmPurchaseOrderInfo: {},
            confirmMaterialInfo: {},
            searchObj:{},
            inspectionOrderInfo: {
                inspectionArrivalChildOrderVoList: [],
                fwhname: null,
                fwhid: null,
                fename: null,
                feid: null,
                fpamid: null,
                fiamdate: null,
                fpid: null,
                fpname: null,
                fiamstatus: "0",
                fiammemo: null
            }
        }
    },
    created () {
        this.vueInit()
        if (this.updateOrCreate) {
            this.inspectionOrderInfo = this.editInspectionOrder
        }else {
            this.inspectionOrderInfo.fiamdate = moment(new Date()).format("YYYY-MM-DD HH:mm:ss")
        }
    },
    updated () {
       
    },
    methods: {
         // 事件格式化 利用momeent 模块 npm install moment
         dateFormat: function(row,column) {
            var date = row[column.property]
            if (date == undefined) {
                return ""
            }
            return moment(date).format("YYYY-MM-DD HH:mm:ss")
        },
        vueInit() {
            getEmpList().then(response => {
                this.empList = response.data.empList
            })
            getWarehouseList({}).then(response => {
                this.warehouseList = response.data.warehouseList
            })
            getProvList({}).then(response => {
                this.provList = response.data.provList
            })
            getPurchaseArrivalOrderList(this.searchObj).then(response => {
                this.purchaseArrivalOrderList = response.data.purchaseArrivalOrderList
            })
        },
        vueReset() {
            this.confirmVisible = false
        },
        vueDelete(row) {
            this.inspectionOrderInfo.inspectionArrivalChildOrderVoList.splice(row,1)
        },
        vueEdit(row){
            console.log(row)
            this.updateId = row.$index
            this.confirmMaterialInfo = row.row
            this.confirmMaterialVisible = true
        
        },
        selectArrivalOrder() {
            this.purchaseArrivalOrderVisible = true            
        },
        purchaseOrderFetch() {
            getMaterialList(this.searchObj).then(response => {
                this.materialList = response.data.materialList
            })
        },
        purchaseOrderReset() {
            this.searchObj = {}
        },
        purchaseArrivalOrderAdd(row) {
            // 主表部分拼接
            const temp_1 = {}
            temp_1.fiamid = this.inspectionOrderInfo.fiamid
            temp_1.feid = row.feid
            temp_1.fename = row.fename
            temp_1.fpamid = row.fpamid
            temp_1.fpmid = row.fpmid
            temp_1.fpid = row.fpid
            temp_1.fpname = row.fpname
            temp_1.fwhid = row.fwhid
            temp_1.fwhname = row.fwhname
            temp_1.inspectionArrivalChildOrderVoList = []
            this.inspectionOrderInfo = temp_1
            // 子表部分拼接
            const temp_2 = {}
            for(var i = 0 ;i < row.purchaseArrivalChildOrderVoList.length;i++){
                temp_2.fmid = row.purchaseArrivalChildOrderVoList[i].fmid
                temp_2.fmname = row.purchaseArrivalChildOrderVoList[i].fmname
                temp_2.fiacquantity = row.purchaseArrivalChildOrderVoList[i].fpacquantity
                temp_2.fiacstatus = "0"
                temp_2.fiacmemo = row.purchaseArrivalChildOrderVoList[i].fpacmemo
                this.inspectionOrderInfo.inspectionArrivalChildOrderVoList.push(temp_2)
            }
            this.purchaseArrivalOrderVisible = false
        },
        confirmMaterialSubmit(confirmMaterialInfo){
            const temp = {}
            temp.fpamid = this.inspectionOrderInfo.fiacid
            temp.fmid = confirmMaterialInfo.fmid
            temp.fmname = confirmMaterialInfo.fmname
            temp.fiacquantity = confirmMaterialInfo.fiacquantity
            temp.fqualified = confirmMaterialInfo.fqualified
            temp.funqualified = confirmMaterialInfo.funqualified
            temp.fiacstatus = "0"
            temp.fiacdate = moment(new Date()).format("YYYY-MM-DD HH:mm:ss")
            temp.fiacmemo = confirmMaterialInfo.fiacmemo
            if (this.updateOrCreate) {
                this.inspectionOrderInfo.inspectionArrivalChildOrderVoList.splice(this.updateId,1,temp)
            }else {
                this.inspectionOrderInfo.fiamstatus = "0"
                this.inspectionOrderInfo.inspectionArrivalChildOrderVoList.push(temp)
            }
            this.updateId = null
            this.confirmMaterialVisible = false
        },
        submitForm() {
            if (this.updateOrCreate) {
                updateInspectionOrder(this.inspectionOrderInfo).then(response => {
                    this.$message.success('修改质检单成功')
                    this.$parent.fetchData()
                })
                this.dialogClose()
            } else {
                createInspectionOrder(this.inspectionOrderInfo).then(response => {
                    this.$message.success('创建质检单成功')
                    this.$parent.fetchData()     
                })
                this.dialogClose()
            }
        },
        resetForm() {
            if (this.updateOrCreate){
                console.log('修改状态下不能清空列表')
            }else {
                this.purchaseArrivalOrderInfo = {}
                this.purchaseArrivalOrderInfo.fpamstatus = 0
            }
        },
        resetMaterial() {
            this.purchaseOrderInfo.purchaseChildOrderVoList = []
        },
        // 解决父页面按钮只能点击一次问题
        dialogClose() {
            this.$parent.fetchData()
            this.dialogFormVisible = false
            this.$parent.updateOrCreate = false
            this.$parent.vueReset()
        },
        addDialogClose() {
            this.addMaterial = {}
            this.$emit('closepop')
        }
    }
}
</script>
    